<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用指南 - 双屏搜索助手</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            color: #333;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 30px;
            background: linear-gradient(120deg, #4b6cb7 0%, #182848 100%);
            color: white;
            border-radius: 12px;
            box-shadow: 0 6px 15px rgba(0,0,0,0.1);
        }
        
        h1 {
            margin-bottom: 10px;
            font-size: 2.2em;
        }
        
        .guide-section {
            background-color: #fff;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        
        .step-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px 0;
        }
        
        .step {
            flex: 1;
            min-width: 250px;
            background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.06);
            border-left: 4px solid #4b6cb7;
        }
        
        .step-number {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
            color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .important-note {
            background: linear-gradient(120deg, #fff8e1 0%, #ffecb3 100%);
            border-left: 4px solid #ff9800;
            padding: 20px;
            border-radius: 0 8px 8px 0;
            margin: 25px 0;
        }
        
        .test-content {
            background: linear-gradient(145deg, #f8f9fa 0%, #e9ecef 100%);
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            margin: 15px 0;
        }
        
        button {
            background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 12px 20px;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }
        
        .highlight {
            background-color: #e3f2fd;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 500;
        }
        
        .verification {
            background: linear-gradient(120deg, #e8f5e9 0%, #c8e6c9 100%);
            border-left: 4px solid #4caf50;
            padding: 20px;
            border-radius: 0 8px 8px 0;
            margin: 25px 0;
        }
        
        .troubleshooting {
            background: linear-gradient(120deg, #ffebee 0%, #ffcdd2 100%);
            border-left: 4px solid #f44336;
            padding: 20px;
            border-radius: 0 8px 8px 0;
            margin: 25px 0;
        }
        
        .menu-example {
            background: #2c3e50;
            color: white;
            padding: 15px;
            border-radius: 6px;
            font-family: monospace;
            margin: 15px 0;
        }
        
        .menu-item {
            display: flex;
            align-items: center;
            margin: 8px 0;
        }
        
        .menu-icon {
            display: inline-block;
            width: 20px;
            text-align: center;
            margin-right: 8px;
        }
        
        .note-box {
            background: linear-gradient(120deg, #e1f5fe 0%, #b3e5fc 100%);
            border-left: 4px solid #039be5;
            padding: 15px;
            border-radius: 0 6px 6px 0;
            margin: 15px 0;
        }
        
        @media (max-width: 768px) {
            .step-container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>使用指南</h1>
        <p>双屏搜索助手</p>
    </header>
    
    <div class="important-note">
        <h3>🌟 右键菜单更新</h3>
        <p>无论在何处右键（空白处或选中文本），都会显示以下两个菜单项：</p>
        <div class="menu-example">
            <div class="menu-item">
                <span class="menu-icon">❐</span>
                <span>❐ 设置为副屏窗口</span>
            </div>
            <div class="menu-item">
                <span class="menu-icon">🔍</span>
                <span>🔍 在副屏百度搜索</span>
            </div>
        </div>
        <p>不会再出现子菜单结构，两个菜单项独立显示。</p>
    </div>
    
    <div class="note-box">
        <h4>💡 使用提示</h4>
        <p><strong>"🔍 在副屏百度搜索"</strong> 菜单项在没有选中文本时点击会提示您先选中文本。</p>
    </div>
    
    <div class="guide-section">
        <h2>🎯 使用方法一：手动指定副屏窗口（推荐）</h2>
        
        <div class="step-container">
            <div class="step">
                <h3><span class="step-number">1</span>设置副屏窗口</h3>
                <p>在您希望作为副屏的Chrome窗口中：</p>
                <ol>
                    <li>右键点击页面任意位置（空白处或文本上都可以）</li>
                    <li>选择 <span class="highlight">"❐ 设置为副屏窗口"</span></li>
                    <li>看到成功提示即设置完成</li>
                </ol>
            </div>
            
            <div class="step">
                <h3><span class="step-number">2</span>执行搜索</h3>
                <p>在主屏窗口中：</p>
                <ol>
                    <li>选中需要搜索的文本</li>
                    <li>右键点击选中文本</li>
                    <li>选择 <span class="highlight">"🔍 在副屏百度搜索"</span></li>
                    <li>搜索结果将自动在副屏窗口中打开</li>
                </ol>
            </div>
        </div>
    </div>
    
    <div class="guide-section">
        <h2>🧭 使用方法二：自动定位副屏</h2>
        
        <div class="step-container">
            <div class="step">
                <h3><span class="step-number">1</span>配置副屏位置</h3>
                <p>设置副屏的准确坐标：</p>
                <ol>
                    <li>点击扩展图标打开设置</li>
                    <li>输入副屏左上角坐标：
                        <ul>
                            <li><strong>左侧位置</strong>：副屏X坐标（如1920）</li>
                            <li><strong>顶部位置</strong>：副屏Y坐标（通常为0）</li>
                        </ul>
                    </li>
                    <li>点击保存设置</li>
                </ol>
            </div>
            
            <div class="step">
                <h3><span class="step-number">2</span>执行搜索</h3>
                <p>使用方式与方法一相同：</p>
                <ol>
                    <li>选中文本</li>
                    <li>右键点击选中文本</li>
                    <li>选择 <span class="highlight">"🔍 在副屏百度搜索"</span></li>
                    <li>扩展自动在副屏位置创建新窗口</li>
                </ol>
            </div>
        </div>
    </div>
    
    <div class="verification">
        <h3>✅ 验证标准</h3>
        <p>成功使用的标志：</p>
        <ul>
            <li>无论在何处右键都显示两个独立菜单项</li>
            <li>使用方法一时：搜索结果<strong>始终</strong>在指定的副屏窗口中打开新标签页</li>
            <li>使用方法二时：每次搜索都创建<strong>新的独立窗口</strong>并准确出现在副屏位置</li>
            <li>主屏窗口<strong>完全不受影响</strong></li>
        </ul>
    </div>
    
    <div class="guide-section">
        <h2>📝 测试内容</h2>
        
        <div class="test-content">
            <h3>测试文本 1 - 技术概念</h3>
            <p>人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器。</p>
        </div>
        
        <div class="test-content">
            <h3>测试文本 2 - 日常话题</h3>
            <p>今天天气真好，阳光明媚，适合外出散步。我计划去公园走走，呼吸新鲜空气，放松一下心情。最近工作压力有点大，需要适当的休息和调整。健康的生活方式包括规律作息、均衡饮食和适量运动。</p>
        </div>
        
        <div class="test-content">
            <h3>测试文本 3 - 学术研究</h3>
            <p>量子计算是一种遵循量子力学规律调控量子信息单元进行计算的新型计算模式。量子计算主要利用量子比特（qubit）和量子纠缠等量子力学现象进行信息处理。相比经典计算，量子计算在某些特定问题上具有指数级的计算优势，如大数分解、量子模拟等。</p>
        </div>
    </div>
    
    <div class="troubleshooting">
        <h3>⚠️ 常见问题解决</h3>
        <p><strong>如果搜索仍在当前窗口打开：</strong></p>
        <ol>
            <li>确认已正确设置副屏窗口（方法一）或副屏位置（方法二）</li>
            <li>重新加载扩展：chrome://extensions/ → 重新加载按钮</li>
            <li>检查控制台错误：查看background page的Console</li>
        </ol>
    </div>
    
    <div style="text-align: center; margin-top: 30px;">
        <button onclick="chrome.runtime.openOptionsPage()">打开扩展设置</button>
        <button onclick="showHelp()">显示快速帮助</button>
    </div>
    
    <script>
        function showHelp() {
            alert("快速帮助：\n1. 右键选择'❐ 设置为副屏窗口'来指定副屏\n2. 在主屏选中文本后右键选择'🔍 在副屏百度搜索'\n3. 确保副屏窗口保持打开状态");
        }
    </script>
</body>
</html>